import 'package:flutter/material.dart';
import 'package:hockey/extensions/jzx_widget_extension.dart';
import 'package:hockey/jzx_apps.dart';
import 'package:hockey/pages/jzx_coins/jzx_coins.dart';
import 'package:hockey/pages/jzx_edit_profile/jzx_edit_profile.dart';
import 'package:hockey/services/jzx_app.dart';
import 'package:hockey/services/jzx_user.dart';

import 'controller.dart';

class JzxMineView extends GetView<JzxMineController> {
  const JzxMineView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      // appBar: const JzxAAppBar(title: 'HomeView', isRootNavigator: true),
      body: SingleChildScrollView(
        child: Column(
          children: const [
            _Header(),
            _Coins(),
            _Options(),
          ],
        ),
      ).paddingOnly(left: 20.w, right: 20.w).backgroud(Assets.images.normalBgv),
    );
  }
}

class _Options extends GetView<JzxMineController> {
  const _Options({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      padding: EdgeInsets.only(top: 8.w),
      itemCount: controller.items.length,
      itemBuilder: (context, index) {
        final item = controller.items[index];
        return InkWell(
          onTap: () {
            Get.toNamed(item.route);
          },
          child: SizedBox(
            height: 56.w,
            child: Row(
              children: [
                item.icon.image(width: 24.w),
                JzxGaps.w16,
                Text(item.title, style: myAppColors.white.font_16.medium),
                JzxGaps.expand,
                const Icon(Icons.arrow_forward_ios_rounded,
                    size: 12, color: Color(0x80FFFFFF)),
              ],
            ),
          ),
        );
      },
    );
  }
}

class _Coins extends GetView<JzxMineController> {
  const _Coins({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Get.toNamed(kRouteJzxCoins);
      },
      child: Container(
        height: 127.w,
        width: double.infinity,
        margin: EdgeInsets.only(top: 16.w),
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.images.coinBgv.path),
            fit: BoxFit.fill,
          ),
        ),
        child: Row(
          children: [
            JzxGaps.w30,
            Expanded(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('My cions', style: myAppColors.text4.font_16),
                  Obx(() => Text(
                        controller.user.value.availableCoins.toString(),
                        style: myAppColors.text4.font(48).bold,
                      )),
                ],
              ),
            ),
            Assets.images.icMineCoin.image(height: 120.w),
            JzxGaps.w8,
          ],
        ),
      ),
    );
  }
}

class _Header extends GetView<JzxMineController> {
  const _Header({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      return Row(
        children: [
          JzxUserFrame(
            controller.user.value.avatarUrl,
            102.w,
            level: JzxUserService.to.userWear.value,
            isUpgrade: JzxUserService.to.userWearIsUpgrade,
          ),
          JzxGaps.w8,
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  controller.user.value.nickname,
                  style: myAppColors.white.font_20.medium,
                ),
                JzxGaps.h8,
                InkWell(
                  onTap: () {
                    JzxAppService.clipboard(controller.user.value.userId);
                  },
                  child: Container(
                    constraints: BoxConstraints(maxWidth: 180.w),
                    padding:
                        const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                    decoration: BoxDecoration(
                      color: const Color(0x40000000),
                      // color: Colors.black54,
                      borderRadius: BorderRadius.circular(100),
                    ),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      // crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'ID：',
                          style: myAppColors.text4.font_12.medium,
                          // maxLines: 1,
                          // overflow: TextOverflow.ellipsis,
                        ),
                        ConstrainedBox(
                          constraints: BoxConstraints(maxWidth: 100.w),
                          child: Text(
                            controller.user.value.userId,
                            style: myAppColors.text4.font_12.medium,
                            // maxLines: 1,
                            // overflow: TextOverflow.ellipsis,
                          ),
                        ),
                        JzxGaps.w4,
                        Assets.images.icCopy.image(width: 20.w),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          InkWell(
            onTap: () {
              Get.toNamed(kRouteJzxEditProfile);
            },
            child: Assets.images.icEdit.image(height: 30.w),
          ),
        ],
      ).paddingOnly(top: kStatusBarHeight + 48.w);
    });
  }
}
